<template>
  <!-- 登录 -->
  <view class="content bg-white">
    <view class="form">
      <view class="title flex-y flex-x-center flex-y-center"
        ><view class="fz44 bold main-theme-color">快存柜商户管理系统</view></view
      >
      <form @submit="formSubmit">
        <view class="ct">
          <view class="item pr">
            <sw-icons
              class="icons"
              icon="icon-yonghu"
              size="50"
              color="#008afe"
            ></sw-icons>
            <input
              v-model="state.formData.username"
              name="username"
              class="input fz32"
              type="text"
              maxlength="11"
              placeholder="请输入用户名"
            />
          </view>
          <view class="item pr">
            <sw-icons
              class="icons"
              icon="icon-mima"
              size="50"
              color="#008afe"
            ></sw-icons>

            <sw-icons
              v-if="state.showPassword"
              class="icons mima"
              icon="icon-yanjing-kai"
              size="46"
              color="#333"
              @click="state.showPassword = !state.showPassword"
            ></sw-icons>
            <sw-icons
              v-else
              class="icons mima"
              icon="icon-yanjing-guan"
              size="46"
              color="#333"
              @click="state.showPassword = !state.showPassword"
            ></sw-icons>
            <input
              v-if="state.showPassword"
              v-model="state.formData.password"
              name="password"
              class="input fz32"
              type="text"
              maxlength="20"
              placeholder="请输入密码"
            />
            <input
              v-else
              v-model="state.formData.password"
              name="password"
              class="input fz32"
              type="password"
              maxlength="20"
              placeholder="请输入密码"
            />
          </view>
        </view>
        <view class="btn-box"
          ><button
            class="btn fff main-bgColor"
            form-type="submit"
            :disabled="state.isSend"
          >
            登录
          </button></view
        >
      </form>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { login } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();

const formRef = ref(null);

const state = reactive({
  isSend: false,
  showPassword: false,
  // 表单数据
  formData: {
    username: "",
    password: "",
    miniapp: 0, // 是否小程序
  },
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  state.formData = { ...state.formData, ...getApp().globalData.username };
});

// 提交
const formSubmit = (e) => {
  const formdata = e.detail.value;
  if (state.isSend) return;
  if (!formdata.username) {
    uni.showToast({
      icon: "none",
      title: "请输入用户名",
    });
    return;
  }
  if (!formdata.password) {
    uni.showToast({
      icon: "none",
      title: "请输入密码",
    });
    return;
  }

  state.isSend = true;
  login(state.formData)
    .then((res) => {
      uni.setStorage({
        key: "token",
        data: res.result.token,
      });
      getApp().globalData.token = res.result.token;
      getApp().globalData.username = {
        username: state.formData.username,
        password: state.formData.password,
      };
      uni.setStorage({
        key: "username",
        data: getApp().globalData.username,
      });
      const arr = res.result.roles.filter((item) => {
        return item.roleCode === "agent_maintain";
      });
      if (arr.length) {
        getApp().globalData.roleCode = arr[0].roleCode;
      } else {
        getApp().globalData.roleCode = "agent";
      }
      uni.setStorage({
        key: "roleCode",
        data: getApp().globalData.roleCode,
      });

      uni.showToast({
        title: res.message,
        mask: true,
      });
      setTimeout(() => {
        proxy.$jump.reLaunch("/pages/index/index");
      }, 1000);
    })
    .finally(() => {
      state.isSend = false;
    });
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.content {
  height: 100vh;
}

.form {
  position: relative;
  top: 50%;
  padding: 60rpx 80rpx 0;
  transform: translateY(-60%);

  .title {
    margin-bottom: 160rpx;
  }

  .item {
    line-height: 100rpx;
    padding: 30rpx 0;
    border-bottom: 2rpx solid @blue;
    .input {
      padding: 0 120rpx;
      height: 40rpx;
      line-height: 40rpx;
    }
    .icons {
      position: absolute;
      left: 25rpx;
      line-height: 1;
    }
    .mima {
      left: auto;
      right: 25rpx;
      z-index: 8;
    }
  }

  .btn {
    margin-top: 120rpx;
  }
}
</style>
